<template>
	<view class="take_photo" style="position: relative;">
		<camera v-if="isHaveCamera" @stop="stop" @ready="ready" flash="off" @error="error" class="camera" device-position="front">
		</camera>
		<image style="position: absolute;top:10px;left:10px;width: 360rpx;height: 360rpx;z-index: 10000;" src="https://qiniu-bjjrzy.bjjrzy.com/bjupi/practice/cognPractice/improve/camera/photoSign.svg"></image>
	</view>
</template>

<script>
	export default {
		name: "FacialPhotoContainer",
		data() { 
			return {
				isHaveCamera:true
			};
		},
		props: [],
		methods: {
			takePhoto() {
				return new Promise((resolve, reject) => {
					const ctx = uni.createCameraContext();
					ctx.takePhoto({
						quality: 'high',
						success: (res) => {
							const fs = wx.getFileSystemManager();
							fs.readFile({
								filePath: res.tempImagePath,
								encoding: 'base64',
								success(res) {
									const photoBase64 = 'data:image/png;base64,' + res.data;
									resolve(photoBase64); // 返回 base64 数据
								},
								fail(error) {
									reject(error);
								}
							});
						},
						fail(error) {
							reject(error);
						}
					});
				});
			},
			error(e) {
				console.log(e);
				if(e.detail.errMsg){
					this.isHaveCamera = false;
					this.$store.commit('updateInfoData', false);
				}
			},
			stop(e){
				console.log(e);
			},
			ready(e){
				console.log(e);
			}
		},
	}
</script>

<style lang="scss">
	.camera {
		width: 360rpx;
		height: 360rpx;
		border-radius: 50%;
		border: 10px solid #E7F8FF;
		overflow:hidden;
		z-index: 10000;
	}
</style>